<template>
	<div>
		<el-container>
			<el-aside>
				<Navigation/>
			</el-aside>
			<el-container>
				<el-header>
					<BreadCrumb :navName="navs"/>
				</el-header>
				<el-main>
					<div class="rightButton">
						<el-button size="small" type="primary" @click="onOff()">{{onOffTxt}}</el-button>
					</div>
					<div class="taskInfo">
						<div class="rightButton">
							<el-button size="small" type="primary" @click="editPart1()">{{buttonTxt1}}</el-button>
						</div>
						<el-form ref="form" :model="task" label-width="150px">
							<div class="taskInfo">
								<el-form-item label="任务编号：">
									<span>{{task.behaviorId}}</span>
								</el-form-item>
                <el-form-item label="任务类型：">
                  <el-radio-group v-show="isEditPart1" v-model="task.parentId" @change="selectLev1()">
                    <el-radio
                      v-for="type in taskTypesParent"
                      :key="type.value"
                      :label="type.value">{{type.label}}
                    </el-radio>
                  </el-radio-group>
                  <span v-show="!isEditPart1">{{taskTypesParent[task.parentId-1]!=null?taskTypesParent[task.parentId-1].label:""}}</span>
                </el-form-item>
								<el-form-item label="任务名称：">
									<el-input v-model="task.name" placeholder="请输入任务名称" v-show="isEditPart1"></el-input>
									<span v-show="!isEditPart1">{{task.name}}</span>
								</el-form-item>
								<el-form-item label="任务头像：">
									<el-upload
									class="upload-demo"
                  v-bind:action="uploadTaskUrl"
									:on-remove="handleRemove"
									:on-success="handleSuccess"
									:on-error="handleError"
									:limit="1"
									:file-list="fileListTask"
									list-type="picture">
										<el-button size="small" type="primary">点击上传</el-button>
										<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
									</el-upload>
								</el-form-item>
							</div>

							<div class="rightButton">
								<el-button size="small" type="primary" @click="editPart2()">{{buttonTxt2}}</el-button>
							</div>

							<div class="taskInfo">
								<div v-if="task.parentId==1">
									<el-form-item label="设置订单解析模板：">
										<el-checkbox-group v-model="task.orderModel" v-show="isEditPart2">
											<el-checkbox
											v-for="order in orderModels"
											:key="order.value"
											:label="order.value">{{order.label}}
											</el-checkbox>
										</el-checkbox-group>
										<span v-show="!isEditPart2">
											<el-tag v-for="order in orderModels" :key="order.value">{{order.label}}</el-tag>
										</span>
									</el-form-item>
									<el-form-item label="设置兑换比例：">
										<el-col :span="1">100：</el-col>
										<el-col :span="3">
											<el-input
												placeholder="请输入金额"
												v-model="task.changePercent" id="changePercent" v-show="isEditPart2">
											</el-input>
											<span v-show="!isEditPart2">{{task.changePercent}}</span>
										</el-col>
									</el-form-item>
									<el-form-item label="兑换规则：">
										<el-input type="textarea" v-model="task.changeRule" placeholder="请输入兑换规则" v-show="isEditPart2"></el-input>
										<span v-show="!isEditPart2">{{task.changeRule}}</span>
									</el-form-item>
								</div>

								<div v-if="task.parentId==2">
									<el-form-item label="设置金额：">
										<el-col :span="5">
											<el-input v-show="isEditPart2"
												placeholder="请输入金额"
												v-model="task.candy">
                        <template slot="append">每次</template>
											</el-input>
											<span v-show="!isEditPart2">{{task.candy}}</span>
										</el-col>
										<!--<el-col :span="2">每次</el-col>-->
									</el-form-item>
									<el-form-item label="兑换规则：">
										<el-input type="textarea" v-model="task.describe" placeholder="请输入兑换规则" v-show="isEditPart2"></el-input>
										<span v-show="!isEditPart2">{{task.describe}}</span>
									</el-form-item>
								</div>

								<div v-if="task.parentId==3">
									<el-form-item label="设置金额：">
										<el-col :span="1">每</el-col>
										<el-col :span="3">
											<el-input  v-show="isEditPart2"
												placeholder="请输入时长"
												v-model="task.times">
											</el-input>
											<span v-show="!isEditPart2">{{task.times}}</span>
										</el-col>
										<el-col :span="1">分钟</el-col>
										<el-col :span="3">
											<el-input  v-show="isEditPart2"
												placeholder="请输入数量"
												v-model="task.coins">
											</el-input>
											<span v-show="!isEditPart2">{{task.coins}}</span>
										</el-col>
										<el-col :span="2">糖果币</el-col>
									</el-form-item>
									<el-form-item label="文章来源：">
										<el-checkbox-group v-model="task.articleSource" v-show="isEditPart2">
											<el-checkbox
											v-for="source in articleSources"
											:key="source.value"
											:label="source.label"
											:value="source.value">
											</el-checkbox>
										</el-checkbox-group>
										<span v-show="!isEditPart2">
											<el-tag v-for="source in articleSources" :key="source.value">{{source.label}}</el-tag>
										</span>
									</el-form-item>
								</div>


							</div>

							<el-form-item>
								<el-button @click="reback()">返回</el-button>
							</el-form-item>
						</el-form>
					</div>

				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	import Navigation from '../Navigation'
	import BreadCrumb from '../BreadCrumb'
  import config from "../../config.json"
  const Root = config.API_HOST;
	export default{
		name:'TaskDetail',
		methods: {
			editPart1(){
				if(this.isEditPart1){
          this.saveTask();
					this.isEditPart1 = false;
					this.buttonTxt1 = "修改";
				} else{
					this.isEditPart1 = true;
					this.buttonTxt1 = "保存";
				}
			},
			editPart2(){
				if(this.isEditPart2){
				  this.saveTask();
					this.isEditPart2 = false;
					this.buttonTxt2 = "修改";
				} else{
					this.isEditPart2 = true;
					this.buttonTxt2 = "保存";
				}
			},
			handleSuccess(response, file, fileList){
        if(response.flag=="success"){
          this.task.behaviorImages.push(response.data.id);
        }
			},
			handleRemove(file,fileList){
        var temp = file.id==undefined?file.response.data.id:file.id;
        for(var i=0;i<this.task.behaviorImages.length;i++){
          if(this.task.behaviorImages[i]==temp){
            this.task.behaviorImages.splice(i,1);
            break;
          }
        }
			},
			handleError(){
				this.$message.error('上传图片失败');
			},
			reback(){
				this.$router.push('/task/list');
			},
      //保存修改方法(没有接口)
      saveTask(){
        var that = this;
        this.$api.post('/task/update',that.task,function(data){
          if(data.flag=="success"){
            that.$message({
              message: "保存成功",
              type: 'success'
            });
          } else{
            that.$message.error(data.msg);
          }
        });
      },
      //更改上下架状态方法
      onOff(){
        var that = this;
        var temp = this.task.status==1?this.task.status=2:this.task.status=1;
        this.$api.post('/task/onOff/'+this.task.behaviorId+'/'+temp,null,function(data){
          if(data.flag=="success"){
            that.$message({
              message: temp==2?"活动关闭成功":"活动开启成功",
              type: 'success'
            });
          } else{
            this.$message.error('开启/关闭失败');
          }
        });
      },
      //初始化图片方法
      loadImageByType(bId) {
			  var that = this;
        this.$api.get('/task/image/'+bId,null,function(data){
          if(data.flag=="success"){
            for(var i=0;i<data.data.length;i++){
              that.task.behaviorImages.push(data.data[i].id);
              that.fileListTask.push({
                "url": data.data[i].url,
                "id": data.data[i].id,
                "name": data.data[i].name
              })
            }
          } else{
            that.$message.error(data.msg);
          }
        });
      }
		},
    mounted() {

		  //初始化活动方法
		  var that = this;
      this.$api.get('/task/get/'+that.$route.params.id,null,function(data){
        if(data.flag=="success"){
          that.task = data.data;
          that.task.behaviorImages = [];
          that.loadImageByType(data.data.behaviorId);
        } else{
          this.$message.error(data.msg);
        }
      });
    },
		data:function(){
			return {
			  //上传图片接口
        uploadTaskUrl:Root + "/task/image/upload",
				isEditPart1:false,
				isEditPart2:false,
				buttonTxt1:"修改",
				buttonTxt2:"修改",
				fileListTask:[],
				navs:["打卡任务管理","任务列表","任务详情"],
				task:{
          parentId:"",
					type:"",
					name:"",
					taskDate:[],
					profile:"",
					orderModel:[],
          //糖果币
          candy:"",
          //活动描述
          describe:"",
					times:"",
					coins:"",
					articleSource:"",
          status:"",
          behaviorImages:[],
          taskLev1:"",

				},
				taskStatus:this.GLOBAL.taskStatus,
				taskTypesParent:this.GLOBAL.taskTypesParent,
        taskTypes:[],
				orderModels:this.GLOBAL.orderModels,
				articleSources:this.GLOBAL.articleSources
			}
		},
    computed:{
      onOffTxt(){
        return this.task.status==1?"关闭该活动":"开启该活动"
      }
    },
		components:{
			Navigation,
			BreadCrumb
		}
	}
</script>

<style scoped>
	.taskInfo{
		padding: 20px;
		border: 1px solid #dddddd;
		margin-bottom: 20px;
	}
	#changePercent{
		width: 110px !important;
	}
	.rightButton{
		text-align: right;
		margin-bottom: 10px;
	}
</style>
